<template>
  <article>
    <el-dialog title="添加管理员" :visible.sync="dialogTableVisible" class="edit-wrapper" @close="close">
      <div class="box">
        <el-form :model="info" :rules="rules" ref="form" label-width="70px">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="info.username"></el-input>
            </el-form-item>
            <el-form-item label="名字" prop="name">
                <el-input type="text" v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input type="password" v-model="info.pwd"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="roles">
                <el-select v-model="info.roles" multiple placeholder="请选择" class="block">
                    <el-option v-for="item in roles"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')" :loading="loading">提 交</el-button>
            </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </article>
</template>

<script>
    // import { mapGetters } from 'vuex'
    import md5 from 'js-md5'
    export default {
      props: ['info'],
      data() {
        return {
          roles: [
            { label: '超级管理员', value: 'admin' },
            { label: '普通管理员', value: 'default' }
          ],
          loading: false,
          dialogTableVisible: true,
          rules: {
            name: [
              { required: true, message: '请填写名字', trigger: 'blur' }
            ],
            username: [
              { required: true, message: '请填写用户名', trigger: 'blur' }
            ],
            old_pwd: [
              { required: true, message: '请填写原密码', trigger: 'blur' }
            ],
            pwd: [
              { required: true, message: '请填写密码', trigger: 'blur' }
            ],
            roles: [
              { required: true, message: '请选择权限', trigger: 'change', type: 'array' }
            ]
          }
        }
      },
      methods: {
        close() {
          this.$emit('close')
        },
        submitForm(formName) {
          this.loading = true
          this.$refs[formName].validate(async(valid) => {
            if (valid) {
              try {
                this.info.pwd = md5(this.info.pwd)
                const message = await this.$store.dispatch('AddUser', this.info)
                this.$message({
                  type: 'success',
                  message: message.msg
                })
                this.loading = false
              } catch (e) {
                this.loading = false
              }
            } else {
              console.log('error submit!!')
              this.loading = false
              return false
            }
          })
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
article {
  padding: 0 100px;
  .box {
    text-align: right;
    margin: 0 20px;
  }
  .block {
    width: 100%;
    display: block;
  }
  .left-item {
    text-align: left;
  }
  .submit {
    width: 100px;
  }
}
</style>
